<template>
  <div class="page-right">
    <div class="top">
      <div class="title">开发技能</div>
      <div class="content">
        <div class="skillRadar" ref="skillRadar"></div>
      </div>
    </div>
    <div class="center">
      <div class="title">各地区程序员占比</div>
      <div class="content">
        <div class="proportion" ref="proportionPie"></div>
      </div>
    </div>
    <div class="bottom">
      <div class="title">程序员人才库</div>
      <div class="content flex">
        <div class="table-title">
          <div class="table-name">姓名</div>
          <div class="table-age">年龄</div>
          <div class="table-sex">性别</div>
          <div class="table-type">经验</div>
          <div class="table-work">岗位</div>
        </div>
        <vue3-seamless-scroll
          :list="userList"
          :limitScrollNum="4"
          :hover="true"
          :singleHeight="16 * 3"
          :singleWaitTime="1500"
          class="scroll-box"
        >
          <div class="user-item" v-for="item in userList" :key="item.name">
            <div class="name">{{ item.name }}</div>
            <div class="age">{{ item.age }}</div>
            <div class="sex">{{ item.sex }}</div>
            <div class="type">{{ item.type }}</div>
            <div class="work">{{ item.work }}</div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
import { OptionFun as radarOption } from "../ts/chartskillRadar";
import { OptionFun as proporOption } from "../ts/chartPropPie";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import autoScroll from "@/components/autoScroll/index.vue";
interface User {
  name: string;
  sex: string;
  age: number;
  type: string;
  work: string;
}
const skillRadar = ref<HTMLDivElement | null>(null);
const proportionPie = ref<HTMLDivElement | null>(null);
const userList = ref<User[]>([
  {
    name: "张三",
    sex: "男",
    age: 22,
    type: "应届生",
    work: "JAVA实习生",
  },
  {
    name: "李四",
    sex: "女",
    age: 24,
    type: "两年",
    work: "UI设计师",
  },
  {
    name: "王五",
    sex: "男",
    age: 26,
    type: "四年",
    work: "前端",
  },
  {
    name: "李达",
    sex: "男",
    age: 28,
    type: "六年",
    work: "运维",
  },
  {
    name: "张伟",
    sex: "男",
    age: 23,
    type: "一年",
    work: "测试",
  },
  {
    name: "张三",
    sex: "男",
    age: 22,
    type: "应届生",
    work: "JAVA实习生",
  },
  {
    name: "李四",
    sex: "女",
    age: 24,
    type: "两年",
    work: "UI设计师",
  },
  {
    name: "王五",
    sex: "男",
    age: 26,
    type: "四年",
    work: "前端",
  },
  {
    name: "李达",
    sex: "男",
    age: 28,
    type: "六年",
    work: "运维",
  },
  {
    name: "张伟",
    sex: "男",
    age: 23,
    type: "一年",
    work: "测试",
  },
  {
    name: "张三",
    sex: "男",
    age: 22,
    type: "应届生",
    work: "JAVA实习生",
  },
  {
    name: "李四",
    sex: "女",
    age: 24,
    type: "两年",
    work: "UI设计师",
  },
  {
    name: "王五",
    sex: "男",
    age: 26,
    type: "四年",
    work: "前端",
  },
  {
    name: "李达",
    sex: "男",
    age: 28,
    type: "六年",
    work: "运维",
  },
  {
    name: "张伟",
    sex: "男",
    age: 23,
    type: "一年",
    work: "测试",
  },
]);

let skillChart: any;
let proportionChart: any;

const proporData = reactive({
  data: [
    { value: 40, name: "北京" },
    { value: 38, name: "上海" },
    { value: 32, name: "广州" },
    { value: 30, name: "深圳" },
    { value: 28, name: "杭州" },
    { value: 26, name: "成都" },
    { value: 22, name: "武汉" },
    { value: 18, name: "重庆" },
  ],
  center: ["50%", "50%"],
});
function initSkill() {
  if (skillChart) {
    skillChart.clear();
  }
  skillChart = echarts.init(skillRadar.value);
  skillChart.setOption(radarOption());
}
function initProportion() {
  if (proportionChart) {
    proportionChart.clear();
  }
  proportionChart = echarts.init(proportionPie.value);
  proportionChart.setOption(proporOption(proporData));
}
onMounted(() => {
  initSkill();
  initProportion();
});
</script>

<style lang="scss" scoped>
.page-right {
  width: 25%;
  height: 100%;
  background: url("@/assets/img/screen/bg_asid.png") no-repeat;
  background-size: 100% 100%;
  .title {
    width: 100%;
    height: 52.5px;
    line-height: 52.5px;
    text-indent: 1rem;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #fff;
  }
  .content {
    height: calc(100% - 52.5px);
    width: 100%;
  }
  .top,
  .center,
  .bottom {
    width: 100%;
    height: 33.33%;
  }
  .skillRadar,
  .proportion {
    width: 100%;
    height: 100%;
  }
  .flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 0;
    box-sizing: border-box;
    .table-title {
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      font-size: 1rem;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      color: #fff;
      > div {
        width: 20%;
        text-align: center;
      }
    }
    .scroll-box {
      flex: 1;
      overflow: hidden;
      box-sizing: border-box;
      color: #fff;
      font-size: 0.9rem;
      .user-item {
        display: flex;
        justify-content: space-between;
        height: 3rem;

        > div {
          width: 20%;
          text-align: center;
          line-height: 3rem;
        }
        .type {
          color: #00b180;
        }
        .work {
          color: orange;
        }
      }
    }
  }
}
</style>